<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="操作员列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-select title="商户号" :up-table="true" :sreach="true" name="mchtId"
                                     :options="mchtList"></form-select>
                        <form-input title="操作员名称" :up-table="true" name="oprName" class="oprName"></form-input>
                        <form-select title="操作员状态" :up-table="true" :sreach="true" name="stat" :options="stateOptions"></form-select>
                        <span class="pull-right">
                             <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                        <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                        </span>

                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <modal-container title="修改" v-el:modal v-ref:modal class="edit-modal" theme="small_window">
            <form @submit.prevent @reset.prevent v-el:mform>
                <div class="modal-body">
                    <table-modal :item="item" :columns-set="columnsSet" :columns-num="1"></table-modal>
                </div>
                <div class="modal-footer">
                    <v-button data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                    <v-button theme="primary" type="submit">保存</v-button>
                </div>
            </form>
        </modal-container>
        <modal-container title="重置密码" v-el:reset-modal v-ref:reset-modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:reset-mform>
                <div class="modal-footer">
                    <v-button class="pull-left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                    <v-button theme="primary" type="submit">保存</v-button>
                </div>
            </form>
        </modal-container>
        <!-- /.row -->
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn + .btn {
        margin-right: 10px;
    }

    /*.form-inline .oprName {*/
        /*margin-left: 1.7% !important;*/
    /*}*/
</style>
<script>

    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            item: {},
            mchtList: [],
            columnsSet: [],
            role: [],
            columnsUpdateSet: [],
            stateOptions: [{key: "所有状态", value: ""}, {key: "锁定", value: "1"}, {key: "正常", value: "0"}],
        }),
        methods: {
            //还原弹出框位置
            resetBindDrag() {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            },
            getMcht(data) {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: "/api/v2" + projectName_Url + "/list/mcht/role/" + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    list.unshift({key: "所有商户", value: ""});
                    self.$set("mchtList", list);
                    self.mchtIdValue = list[0].value
                }, error => {
                });
            },
        },
        created() {
            //datatable所用数组
            columnsSet = [{
                title: "商户号",
                data: "mchtId",
                visible:false,
                edit: true,
                readonly: true,
                className: "operate"
            }, {
                    title: "商户名称",
                    data: "mchtName",
                    edit: true,
                    readonly: true,
                    className: "operate"
                },
                {
                    title: "角色名称",
                    data: "roleId",
                    visible:false,
                    className: "operate"
                },
                {
                    title: "角色名称",
                    data: "roleName",
                    className: "operate",
                }, {
                    title: "操作员号",
                    data: "oprId",
                    visible:false,
                    edit: true,
                    readonly: true,
                    className: "operate"
                }, {
                    title: "操作员名称",
                    data: "oprName",
                    edit: true,
                    className: "operate",
                    className: "wrap"
                }, {
                    title: "性别",
                    data: "oprSex",
                    options: [{key: "男", value: "MAN"}, {key: "女", value: "WOMAN"}],
                    className: "operate",
                    render: function (data) {
                        return (data == "MAN") ? "男" : "女"
                    }
                }, {
                    title: "操作员状态",
                    data: "oprStat",
                    className: "operate",
                    render: function (data) {
                        return (data == 1) ? "锁定" : "正常"
                    }
                }, {
                    title: "操作员描述",
                    data: "oprDsc",
                    edit: true,
                    className: "operate",
                    className: "wrap"
                }, {
                    title: "相关操作",
                    className: "operate",
                    width: "220px",
                    render: function (value, type, row) {
                        if (row.oprStat == "1") {
                            return `
                        <button type="button" class="btn btn-danger btn-sm state">解锁</button>
                        `
                        }  else if(row.oprName == JSON.parse(localStorage.getItem("id_token")).usrName && row.mchtId == JSON.parse(localStorage.getItem("id_token")).mchtId) {
                            return `
                        `
                        } else {
                            return `
                        <button type="button" class="btn btn-danger btn-sm state">锁定</button>
                        <button type="button" class="btn btn-primary btn-sm edit">修改</button>
                        <button type="button" class="btn btn-warning btn-sm reset">重置密码</button>
                        <button type="button" class="btn btn-danger btn-sm delete">删除</button>
                        `
                        }

                    }
                }]
        },
        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2"
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            self.getMcht();
            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //发送请求
                    var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                    var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/opr/query/"+mchtId,
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.oprList || []
                    })
                }
            });

            // 更新
            $(self.$el).on("click", ".edit", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                self.item = dataArray;
                dateTime()

                //修改弹框里角色名称请求
                self.$post({
                    url: '/api/v1/plat/role/query/' + dataArray.mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.roleList;
                    var _array = [];
                    for (let i = 0; i < list.length; i++) {
                        _array.push({value: list[i].roleId, key: list[i].roleTypeAndName});
                    }
                    self.$set("columnsSet[2].options", _array)
                    self.item = dataArray;
                }, error => {
                });

                $(self.$els.mform).validate(self.item.valdate = {
                    async submitHandler() {
                        var form = self.$els.mform;
                        var _data = serialize(form, {hash: true, disabled: true, empty: true});
                        _data.mchtId = self.item.mchtId
                        var result = await self.$post({
                            url: "/api/v1" + projectName_Url + "/plat/opr/" + _data.oprId + '/' + self.item.mchtId,
                            data: _data,
                            method: "PUT"
                        });
                        Midway.alert({title: "操作提示", content: result.errorInfo})

                        dataTable.ajax.reload(null, false);
                        $(self.$els.modal).modal('hide');
                        self.resetBindDrag()
                    },
                    rules: {
                        mchtName: {
                            required: true
                        },
                        oprName: {
                            required: true,
                            maxlength: 16
                        },
                        oprPwd: {
                            required: true,
                            maxlength: 32,
                            minlength: 8
                        },
                        roleId: {
                            required: true,
                            maxlength: 6
                        },
                        oprDsc: {
                            maxlength:64
                        }
                    }
                });
                $(self.$els.modal).modal('show');
            });

            // 重置密码
            $(self.$el).on("click", ".reset", async function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                // self.item = dataArray;
                let data = {
                    title: "重置密码操作",
                    content: "您是否要重置操作员" + dataArray.oprName + "的密码?"
                }
                Midway.confirm(data).then(function () {
                    let _data = dataArray.mchtId
                    var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId

                    self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/opr/resetPwd/" + dataArray.oprId,
                        data: _data,
                        method: "PUT"
                    }).then(response => {
                        let message = {
                            title: "操作提示",
                            content: "重置用户" + dataArray.oprName + "密码成功"
                        }
                        Midway.alert(message);
                        self.reload();

                    }, error => {
                    });
                })
                dataTable.ajax.reload();
            });

            //刪除
            $(self.$el).on("click", ".delete", async function () {
                var Row = $(this).closest('tr').get(0);
                var value = dataTable.row(Row).data().oprName;
                var oprId = dataTable.row(Row).data().oprId;
                var mchtId = dataTable.row(Row).data().mchtId;
                await Midway.confirm({
                    title: "删除操作员",
                    content: "是否要删除操作员:" + value + "?"
                })
                var result = await self.$post({
                    url: "/api/v1" + projectName_Url + "/plat/opr/" + oprId + '/' + mchtId,
                    method: "DELETE"
                });

                Midway.alert({title: "操作提示", content: result.errorInfo})

                dataTable.ajax.reload();
            });

            $(self.$el).on("click", ".state", async function () {
                var Row = $(this).closest('tr').get(0);
                var value = dataTable.row(Row).data().oprName;
                var oprId = dataTable.row(Row).data().oprId;
                var mchtId = dataTable.row(Row).data().mchtId;
                var state = dataTable.row(Row).data().oprStat;

                if (state == "0") {
                    await Midway.confirm({
                        title: "修改状态",
                        content: "确认是否要锁定:" + value + "的状态?"
                    })
                } else {
                    await Midway.confirm({
                        title: "修改状态",
                        content: "确认是否要解锁:" + value + "的状态?"
                    })
                }


                var result = await self.$post({
                    url: "/api/v1" + projectName_Url + "/plat/opr/chStat/" + oprId,
                    data: mchtId,
                    method: "PUT"
                });
                dataTable.ajax.reload();
            });

            $(self.$el).on("click", ".detail", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                self.item = dataArray;
                $(self.$els.detailModal).modal('show');
            });
        },
        beforeDestroy() {
            $(this.$el).off("click")
        }
    }
</script>
